
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> 
<html> <!--<![endif]-->
    <head>

        <!-- Meta Tags -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Hotel Booking</title>   

        <meta name="description" content="Insert Your Site Description" /> 

        <!-- Mobile Specifics -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>   

        <!-- Mobile Internet Explorer ClearType Technology -->
        <!--[if IEMobile]>  <meta http-equiv="cleartype" content="on">  <![endif]-->

        <!-- Bootstrap -->
        <link href="_include/css/bootstrap.min.css" rel="stylesheet">

        <!-- Main Style -->
        <link href="_include/css/main.css" rel="stylesheet">

        <!-- Custom Style -->
        <link href="_include/css/hotelBooking.css" rel="stylesheet">

        <!-- Supersized -->
        <link href="_include/css/supersized.css" rel="stylesheet">
        <link href="_include/css/supersized.shutter.css" rel="stylesheet">

        <!-- FancyBox -->
        <link href="_include/css/fancybox/jquery.fancybox.css" rel="stylesheet">

        <!-- Font Icons -->
        <link href="_include/css/fonts.css" rel="stylesheet">

        <!-- Shortcodes -->
        <link href="_include/css/shortcodes.css" rel="stylesheet">

        <!-- Responsive -->
        <link href="_include/css/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="_include/css/responsive.css" rel="stylesheet">

        <!-- Supersized -->
        <link href="_include/css/supersized.css" rel="stylesheet">
        <link href="_include/css/supersized.shutter.css" rel="stylesheet">

        <!-- Google Font -->
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>

        <!-- Fav Icon -->
        <link rel="shortcut icon" href="#">

        <link rel="apple-touch-icon" href="#">
        <link rel="apple-touch-icon" sizes="114x114" href="#">
        <link rel="apple-touch-icon" sizes="72x72" href="#">
        <link rel="apple-touch-icon" sizes="144x144" href="#">

        <!-- Modernizr -->
        <script src="_include/js/modernizr.js"></script>

        <!-- Analytics -->
        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'Insert Your Code']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();

        </script>
        <!-- End Analytics -->

        <!-- JQuery -->
        <script src="_include/js/jquery-1.10.2.min.js"></script>

    </head>


    <body>

        <!-- This section is for Splash Screen -->
        <!--    <div class="ole">
              <section id="jSplash">
                <div id="circle"></div>
              </section>
            </div>-->
        <!-- End of Splash Screen -->

        <!-- Homepage Slider -->
        <!--    <div id="home-slider">	
              <div class="overlay"></div>
        
              <div class="slider-text">
                <div id="slidecaption"></div>
              </div>   
        
              <div class="control-nav">
                <a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
                <a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
                <ul id="slide-list"></ul>
        
                <a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
              </div>
            </div>-->
        <!-- End Homepage Slider -->

        <!-- Header -->
        <header>
            <div class="sticky-nav">
                <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

                <div id="logo">
                    <a id="goUp" href="#home-slider" title="Hotel Booking">Hotel Booking</a>
                </div>

                <nav id="menu">
                    <ul id="menu-nav">
                        <li class="current"><a href="HomeServlet">Home</a></li>
                        <li><a href="AdminServlet">Admin space</a></li> <%-- ko lam--%>
                        <li><a href="HostServlet">Host</a></li>  <%--add hotel, view order--%>
                        <li><a href="ProfileServlet" class="external">Profile</a></li> <%--ko lam--%>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- End Header -->

        <!-- Our Work Section -->
        <div id="home" class="page">
            <div class="container">
                <!-- Title Page -->
                <div class="row">
                    <div class="span12">
                        <div class="title-page">
                            <h2 class="title">Host's Hotels Management</h2>
                            <h3 class="title-description">Welcome to Hotel Booking</h3>
                        </div>
                    </div>
                </div>
                <!-- End Title Page -->

                <!-- Portfolio Projects -->
                <div class="row">
                    <div class="span3">
                        <!-- Filter -->
                        <nav id="options" class="work-nav">
                            <ul id="filters" class="option-set" data-option-key="filter">
                                <li class="type-work">Cities in Viet Nam</li>
                                <li><a href="#filter" data-option-value="*" class="selected">Ha Noi</a></li>
                                <li><a href="#filter" data-option-value=".design">TP Ho Chi Minh</a></li>
                                <li><a href="#filter" data-option-value=".photography">Nha Trang</a></li>
                                <li><a href="#filter" data-option-value=".video">Phu Quoc</a></li>
                            </ul>
                        </nav>
                        <!-- End Filter -->
                    </div>

                    <div class="span9">  
                        <h3 class="spec">Basic Information</h3>
                        <form id="contact-form" class="contact-form" name="infoForm" action="#" >
                            First Name: <br/>
                            <input id="contact_name" type="text" name="firstnameText" value="Sample First Name" />

                            Last Name:<br/>
                            <input id="contact_email" type="text" name="lastnameText" value="Sample Last Name" />

                            Sex:<br/>
                            <input id="contact_email" type="text" name="sexText" value="Sample Sex" />

                            Birthday:<br/>
                            <input id="contact_email" type="text" name="birthdayText" value="Sample Birthday" />

                            Email:<br/>
                            <input id="contact_email" type="text" name="emailText" value="Sample Email" />

                            Phone:<br/>
                            <input id="contact_email" type="text" name="phoneText" value="Sample Phone" />

                            Fax:<br/>
                            <input id="contact_email" type="text" name="faxText" value="Sample Fax" />

                            Address:<br/>
                            <input id="contact_email" type="text" name="addressText" value="Sample Address" />

                            <!--                            <p class="contact-submit">
                                                            <a id="update-submit" name="updateButton" class="submit" href="#">Update</a>
                                                            <a id="cancel-submit" name="cancelButton" class="submit" href="#">Cancel</a>
                                                        </p>-->
                            <!--<input id="contact-submit" class="submit" type="button" name="editButton" value="Edit" onclick="hostChangeFormMode()" />-->
                            <input id="contact-submit" class="submit" type="button" name="updateButton" value="Update" disabled="true" />
                            <input id="contact-submit" class="submit" type="button" name="cancelButton" value="Cancel" disabled="true" />

                            <div id="response">
                            </div>
                        </form>

                        <hr/>
                        <h3 class="spec">Hotels list</h3>
                        <!-- List of Hotels -->
                        <div class="row">
                            <div class="span3 fixImage">
                                <img src="_include/img/work/thumbs/image_06.jpg" />
                            </div>
                            <div class="span6">
                                <p><a>Hotel</a></p>
                                <p>Address</p>
                                <div class="input-append">
                                    <input class="input-mini" id="appendedInputButton" type="text" placeholder="OK">
                                    <button class="btn btn-danger" type="button">Remove!</button>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="span3 fixImage">
                                <img src="_include/img/work/thumbs/image_06.jpg" />
                            </div>
                            <div class="span6">
                                <p><a>Hotel</a></p>
                                <p>Address</p>
                                <div class="input-append">
                                    <input class="input-mini" id="appendedInputButton" type="text" placeholder="OK">
                                    <button class="btn btn-danger" type="button">Remove!</button>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <!-- END List of Hotels -->
                        <div class="accordion-group">
                            <div class="accordion-heading togglize">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#creating-hotel">
                                    Create new hotel
                                    <span class="font-icon-plus"></span>
                                    <span class="font-icon-minus"></span>
                                </a>
                            </div>
                            <div id="creating-hotel" class="accordion-body collapse">
                                <div class="accordion-inner">                                    
                                    <form id="contact-form" class="contact-form" name="createForm" action="#" >
                                        Hotel name:<br/> 
                                        <input id="contact_name" type="text" name="nameText" placeholder="Sample First Name" />

                                        Hotel address:<br/>
                                        <input id="contact_name" type="text" name="addressText" placeholder="Sample First Name" />

                                        Hotel phone:<br/>
                                        <input id="contact_email" type="text" name="phoneText" placeholder="Sample Last Name" />

                                        Hotel price:<br/>
                                        <input id="contact_email" type="text" name="priceText" placeholder="Sample Birthday" />

                                        Hotel star:<br/>
                                        <input id="contact_email" type="text" name="starText" placeholder="Sample Email" />

                                        Hotel description:<br/>
                                        <textarea id="contact_message" name="descriptionText" placeholder="Sample Description" rows="15" cols="40"></textarea>

                                        <p class="contact-submit">
                                            <a id="create-submit" name="createButton" class="submit" href="#" >Create new Hotel</a>
                                            <!--<a id="cancel-submit" name="cancelButton" class="submit" data-toggle="collapse" data-parent="#" href="#creating-hotel">Cancel</a>-->
                                        </p>

                                        <div id="response">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <!-- End Portfolio Projects -->
            </div>
        </div>
        <!-- End Our Work Section -->



        <!-- Footer -->
        <footer>
            <p class="credits">&copy;2013 Brushed. <a href="http://themes.alessioatzeni.com/html/brushed/" title="Brushed | Responsive One Page Template">Brushed Template</a> by <a href="http://www.alessioatzeni.com/" title="Alessio Atzeni | Web Designer &amp; Front-end Developer">Alessio Atzeni</a></p>
        </footer>
        <!-- End Footer -->

        <!-- Back To Top -->
        <a id="back-to-top" href="#">
            <i class="font-icon-arrow-simple-up"></i>
        </a>
        <!-- End Back to Top -->

        <!-- Js -->
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  jQuery Core -->
        <script src="_include/js/bootstrap.min.js"></script> <!-- Bootstrap -->
        <script src="_include/js/supersized.3.2.7.min.js"></script> <!-- Slider -->
        <script src="_include/js/waypoints.js"></script> <!-- WayPoints -->
        <script src="_include/js/waypoints-sticky.js"></script> <!-- Waypoints for Header -->
        <script src="_include/js/jquery.isotope.js"></script> <!-- Isotope Filter -->
        <script src="_include/js/jquery.fancybox.pack.js"></script> <!-- Fancybox -->
        <script src="_include/js/jquery.fancybox-media.js"></script> <!-- Fancybox for Media -->
        <script src="_include/js/jquery.tweet.js"></script> <!-- Tweet -->
        <script src="_include/js/plugins.js"></script> <!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
        <script src="_include/js/main.js"></script> <!-- Default JS -->
        <script src="_include/js/hotelBooking.js"></script> <!-- Custom JS -->
        <!-- End Js -->

    </body>
</html>